<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线咨询</title>
    <link rel="stylesheet" href="https://unpkg.com/layui@2.8.18/dist/css/layui.css">
    <style>
        .chat-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 450px;
            height: 500px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            z-index: 1000;
            display: none; /* 默认隐藏 */
        }

        /* 悬浮咨询按钮 */
        .chat-float-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 120px;
            height: 50px;
            background: #1E9FFF;
            border: none;
            border-radius: 25px;
            color: white;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            box-shadow: 0 4px 16px rgba(30, 159, 255, 0.3);
            transition: all 0.3s ease;
            z-index: 999;
        }

        .chat-float-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(30, 159, 255, 0.4);
        }

        .chat-float-btn .avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: #1E9FFF;
        }

        .chat-float-btn .text {
            font-size: 14px;
            font-weight: 500;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .chat-container {
                width: 300px;
                height: 350px;
                right: 10px;
                bottom: 10px;
            }
            
            .chat-float-btn {
                width: 100px;
                height: 45px;
                right: 10px;
                bottom: 10px;
            }
            
            .chat-float-btn .text {
                font-size: 12px;
            }
        }

        .chat-header {
            background: #1E9FFF;
            color: white;
            padding: 15px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-radius: 12px 12px 0 0;
        }

        .chat-header-left {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .chat-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: #1E9FFF;
        }

        .chat-info h3 {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 2px;
        }

        .chat-info p {
            font-size: 12px;
            opacity: 0.8;
        }

        .chat-controls {
            display: flex;
            gap: 8px;
        }

        .chat-control-btn {
            background: none;
            border: none;
            color: white;
            font-size: 16px;
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            transition: background 0.3s;
        }

        .chat-control-btn:hover {
            background: rgba(255,255,255,0.2);
        }

        .chat-messages {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            background: #f8f9fa;
        }

        .message-item {
            margin-bottom: 20px;
            display: flex;
            flex-direction: column;
        }

        .message-time {
            text-align: center;
            color: #999;
            font-size: 12px;
            margin-bottom: 10px;
        }

        .message-bubble {
            max-width: 80%;
            padding: 12px 16px;
            border-radius: 18px;
            position: relative;
            word-wrap: break-word;
        }

        .message-user {
            align-self: flex-end;
        }

        .message-user .message-bubble {
            background: #1E9FFF;
            color: white;
            border-bottom-right-radius: 6px;
        }

        .message-assistant {
            align-self: flex-start;
        }

        .message-assistant .message-bubble {
            background: white;
            color: #333;
            border: 1px solid #e0e0e0;
            border-bottom-left-radius: 6px;
        }

        .suggested-questions {
            padding: 0 20px 15px;
            display: flex;
            gap: 8px;
            overflow-x: auto;
        }

        .suggested-btn {
            background: #e3f2fd;
            color: #1E9FFF;
            border: none;
            padding: 8px 12px;
            border-radius: 20px;
            font-size: 12px;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.3s;
        }

        .suggested-btn:hover {
            background: #1E9FFF;
            color: white;
        }

        .chat-input {
            padding: 15px 20px;
            background: white;
            border-top: 1px solid #e0e0e0;
        }

        .toolbar-btn {
            background: none;
            border: none;
            font-size: 18px;
            color: #666;
            cursor: pointer;
            padding: 4px;
            border-radius: 4px;
            transition: color 0.3s;
            flex-shrink: 0;
        }

        .toolbar-btn:hover {
            color: #1E9FFF;
        }

        .input-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .input-top-row {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .toolbar-section {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .phone-section {
            display: flex;
            gap: 8px;
            align-items: center;
            margin-left: auto;
        }

        .phone-input {
            border: 1px solid #e0e0e0;
            border-radius: 20px;
            padding: 8px 12px;
            font-size: 14px;
            outline: none;
            transition: border-color 0.3s;
            width: 120px;
        }

        .phone-input:focus {
            border-color: #1E9FFF;
        }

        .input-section {
            display: flex;
            gap: 8px;
            align-items: flex-end;
            position: relative;
        }

        .input-field {
            flex: 1;
            border: 1px solid #e0e0e0;
            border-radius: 20px;
            padding: 12px 15px;
            padding-right: 70px;
            font-size: 14px;
            resize: none;
            outline: none;
            transition: border-color 0.3s;
            height: 60px;
            overflow-y: auto;
        }

        .input-field:focus {
            border-color: #1E9FFF;
        }

        .send-btn {
            background: #1E9FFF;
            color: white;
            border: none;
            padding: 10px 18px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.3s;
            white-space: nowrap;
            position: absolute;
            bottom: 10px;
            right: 10px;
            z-index: 10;
        }

        .send-btn:hover {
            background: #0d8aff;
        }

        .call-btn {
            background: #52c41a;
            color: white;
            border: none;
            padding: 8px 12px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.3s;
            white-space: nowrap;
            flex-shrink: 0;
            margin-left: auto;
        }

        .call-btn:hover {
            background: #389e0d;
        }

        .chat-footer {
            padding: 8px 20px;
            background: #f8f9fa;
            text-align: center;
            font-size: 11px;
            color: #999;
            border-top: 1px solid #e0e0e0;
        }

        .phone-number {
            color: #ff4d4f;
            font-weight: bold;
        }

        /* 表情面板样式 */
        .emoji-panel {
            position: absolute;
            bottom: 100%;
            left: 0;
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
            padding: 10px;
            display: none;
            z-index: 1001;
            width: 280px;
            max-height: 200px;
            overflow-y: auto;
        }

        .emoji-grid {
            display: grid;
            grid-template-columns: repeat(8, 1fr);
            gap: 8px;
        }

        .emoji-item {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-radius: 4px;
            font-size: 18px;
            transition: background 0.2s;
            user-select: none;
        }

        .emoji-item:hover {
            background: #f0f0f0;
        }

        .emoji-section {
            margin-bottom: 10px;
        }

        .emoji-section-title {
            font-size: 12px;
            color: #666;
            margin-bottom: 5px;
            padding: 0 5px;
        }

        .toolbar-section {
            position: relative;
        }
    </style>
</head>
<body>
    <!-- 悬浮咨询按钮 -->
    <button class="chat-float-btn" id="chatFloatBtn" onclick="showChat()">
        <div class="avatar">
            <i class="layui-icon layui-icon-user"></i>
        </div>
        <span class="text">在线咨询</span>
    </button>

    <div class="chat-container" id="chatContainer">
        <!-- 聊天头部 -->
        <div class="chat-header">
            <div class="chat-header-left">
                <div class="chat-avatar">
                    <i class="layui-icon layui-icon-user"></i>
                </div>
                <div class="chat-info">
                    <h3>在线客服</h3>
                    <p>专业客服为您服务</p>
                </div>
            </div>
            <div class="chat-controls">
                <button class="chat-control-btn" onclick="toggleChat()">
                    <i class="layui-icon layui-icon-minus"></i>
                </button>
                <button class="chat-control-btn" onclick="closeChat()">
                    <i class="layui-icon layui-icon-close"></i>
                </button>
            </div>
        </div>

        <!-- 聊天消息区域 -->
        <div class="chat-messages" id="chatMessages">
            <!-- 会话开始消息 -->
            <div class="message-item">
                <div class="message-time">2025-01-27 16:49:57 开始沟通</div>
            </div>

            <!-- 客服欢迎消息 -->
            <div class="message-item message-assistant">
                <div class="message-bubble">
                    欢迎您来咨询，您可以拨打<span class="phone-number">15852664469</span>详细咨询！
                </div>
            </div>
        </div>

        <!-- 建议问题 -->
        <div class="suggested-questions" id="suggestedQuestions">
            <button class="suggested-btn" onclick="sendSuggestedQuestion('可以介绍下你们的产品么？')">
                可以介绍下你们的产品么？
            </button>
            <button class="suggested-btn" onclick="sendSuggestedQuestion('你们是怎么收费的呢？')">
                你们是怎么收费的呢？
            </button>
            <button class="suggested-btn" onclick="sendSuggestedQuestion('现在有什么优惠活动？')">
                现在有什么优惠活动？
            </button>
        </div>

        <!-- 输入区域 -->
        <div class="chat-input">
            <div class="input-container">
                <div class="input-top-row">
                    <div class="toolbar-section">
                        <button class="toolbar-btn" onclick="toggleEmoji()">
                            <i class="layui-icon layui-icon-face-smile"></i>
                        </button>
                        <!-- 表情面板 -->
                        <div class="emoji-panel" id="emojiPanel">
                            <div class="emoji-section">
                                <div class="emoji-section-title">常用表情</div>
                                <div class="emoji-grid">
                                    <div class="emoji-item" onclick="insertEmoji('😊')">😊</div>
                                    <div class="emoji-item" onclick="insertEmoji('😂')">😂</div>
                                    <div class="emoji-item" onclick="insertEmoji('😍')">😍</div>
                                    <div class="emoji-item" onclick="insertEmoji('🤔')">🤔</div>
                                    <div class="emoji-item" onclick="insertEmoji('👍')">👍</div>
                                    <div class="emoji-item" onclick="insertEmoji('👎')">👎</div>
                                    <div class="emoji-item" onclick="insertEmoji('❤️')">❤️</div>
                                    <div class="emoji-item" onclick="insertEmoji('😭')">😭</div>
                                    <div class="emoji-item" onclick="insertEmoji('😡')">😡</div>
                                    <div class="emoji-item" onclick="insertEmoji('😱')">😱</div>
                                    <div class="emoji-item" onclick="insertEmoji('🎉')">🎉</div>
                                    <div class="emoji-item" onclick="insertEmoji('💯')">💯</div>
                                    <div class="emoji-item" onclick="insertEmoji('🔥')">🔥</div>
                                    <div class="emoji-item" onclick="insertEmoji('✨')">✨</div>
                                    <div class="emoji-item" onclick="insertEmoji('💪')">💪</div>
                                    <div class="emoji-item" onclick="insertEmoji('🙏')">🙏</div>
                                </div>
                            </div>
                            <div class="emoji-section">
                                <div class="emoji-section-title">手势表情</div>
                                <div class="emoji-grid">
                                    <div class="emoji-item" onclick="insertEmoji('👋')">👋</div>
                                    <div class="emoji-item" onclick="insertEmoji('✌️')">✌️</div>
                                    <div class="emoji-item" onclick="insertEmoji('🤝')">🤝</div>
                                    <div class="emoji-item" onclick="insertEmoji('👏')">👏</div>
                                    <div class="emoji-item" onclick="insertEmoji('🙌')">🙌</div>
                                    <div class="emoji-item" onclick="insertEmoji('🤗')">🤗</div>
                                    <div class="emoji-item" onclick="insertEmoji('💁')">💁</div>
                                    <div class="emoji-item" onclick="insertEmoji('🤷')">🤷</div>
                                </div>
                            </div>
                        </div>
                        <button class="toolbar-btn" onclick="uploadImage()">
                            <i class="layui-icon layui-icon-picture"></i>
                        </button>
                        <button class="toolbar-btn" onclick="uploadFile()">
                            <i class="layui-icon layui-icon-file"></i>
                        </button>
                        <button class="toolbar-btn" onclick="startVoice()">
                            <i class="layui-icon layui-icon-voice"></i>
                        </button>
                    </div>
                    <div class="phone-section">
                        <input type="tel" class="phone-input" id="phoneInput" placeholder="输入电话号码">
                        <button class="call-btn" onclick="makeCall()">
                            电话联系
                        </button>
                    </div>
                </div>
                <div class="input-section">
                    <textarea class="input-field" id="messageInput" placeholder="输入消息内容..." rows="1"></textarea>
                    <button class="send-btn" onclick="sendMessage()">
                        发送
                    </button>
                </div>
            </div>
        </div>

        <!-- 底部信息 -->
        <div class="chat-footer">
            PPress提供咨询软件支持
        </div>
    </div>

    <script src="https://unpkg.com/layui@2.8.18/dist/layui.js"></script>
    <script>
        layui.use(['layer'], function(){
            var layer = layui.layer;
            
            let isMinimized = false;
            let isChatVisible = false;

            // 显示聊天窗口
            window.showChat = function() {
                const chatContainer = document.getElementById('chatContainer');
                const floatBtn = document.getElementById('chatFloatBtn');
                
                chatContainer.style.display = 'flex';
                floatBtn.style.display = 'none';
                isChatVisible = true;
                isMinimized = false;
            };

            // 切换聊天窗口最小化状态
            window.toggleChat = function() {
                const container = document.getElementById('chatContainer');
                const messages = document.getElementById('chatMessages');
                const input = document.querySelector('.chat-input');
                const suggested = document.getElementById('suggestedQuestions');
                const footer = document.querySelector('.chat-footer');
                
                if (isMinimized) {
                    container.style.height = '400px';
                    messages.style.display = 'block';
                    input.style.display = 'block';
                    suggested.style.display = 'flex';
                    footer.style.display = 'block';
                    isMinimized = false;
                } else {
                    container.style.height = '60px';
                    messages.style.display = 'none';
                    input.style.display = 'none';
                    suggested.style.display = 'none';
                    footer.style.display = 'none';
                    isMinimized = true;
                }
            };

            // 关闭聊天窗口
            window.closeChat = function() {
                layer.confirm('确定要关闭聊天窗口吗？', {
                    icon: 3,
                    title: '提示'
                }, function(index) {
                    layer.close(index);
                    const chatContainer = document.getElementById('chatContainer');
                    const floatBtn = document.getElementById('chatFloatBtn');
                    
                    chatContainer.style.display = 'none';
                    floatBtn.style.display = 'flex';
                    isChatVisible = false;
                });
            };

            // 发送消息
            window.sendMessage = function() {
                const input = document.getElementById('messageInput');
                const message = input.value.trim();
                
                if (!message) {
                    layer.msg('请输入消息内容', {icon: 2});
                    return;
                }

                addMessage(message, 'user');
                input.value = '';
                
                setTimeout(() => {
                    const responses = [
                        '感谢您的咨询，我们会尽快为您处理！',
                        '您的问题我们已经记录，稍后会有专人联系您。',
                        '如需更多帮助，请拨打客服热线：15852664469',
                        '我们正在为您查询相关信息，请稍候...'
                    ];
                    const randomResponse = responses[Math.floor(Math.random() * responses.length)];
                    addMessage(randomResponse, 'assistant');
                }, 1000);
            };

            // 发送建议问题
            window.sendSuggestedQuestion = function(question) {
                addMessage(question, 'user');
                
                setTimeout(() => {
                    let response = '';
                    if (question.includes('产品')) {
                        response = '我们提供多种产品和服务，包括技术咨询、系统开发、运维支持等。具体详情可以联系我们的销售团队。';
                    } else if (question.includes('收费')) {
                        response = '我们的收费标准根据项目规模和服务内容而定，具体价格可以联系我们的客服进行详细咨询。';
                    } else if (question.includes('优惠')) {
                        response = '目前我们正在进行新年优惠活动，新客户可享受8折优惠，详情请咨询客服。';
                    } else {
                        response = '感谢您的咨询，我们会尽快为您处理！';
                    }
                    addMessage(response, 'assistant');
                }, 1000);
            };

            // 添加消息到聊天区域
            function addMessage(content, type) {
                const messagesContainer = document.getElementById('chatMessages');
                const messageItem = document.createElement('div');
                messageItem.className = `message-item message-${type}`;
                
                messageItem.innerHTML = `
                    <div class="message-bubble">
                        ${content}
                    </div>
                `;
                
                messagesContainer.appendChild(messageItem);
                messagesContainer.scrollTop = messagesContainer.scrollHeight;
            }

            // 拨打电话
            window.makeCall = function() {
                const phoneInput = document.getElementById('phoneInput');
                const phoneNumber = phoneInput.value.trim();
                
                if (!phoneNumber) {
                    layer.msg('请输入电话号码', {icon: 2});
                    return;
                }
                
                layer.confirm(`确定要拨打电话 ${phoneNumber} 吗？`, {
                    icon: 3,
                    title: '拨打电话'
                }, function(index) {
                    layer.close(index);
                    layer.msg(`正在为您转接电话 ${phoneNumber}...`, {icon: 1});
                });
            };

            // 其他功能
            window.toggleEmoji = function() {
                const emojiPanel = document.getElementById('emojiPanel');
                if (emojiPanel.style.display === 'none' || emojiPanel.style.display === '') {
                    emojiPanel.style.display = 'block';
                } else {
                    emojiPanel.style.display = 'none';
                }
            };

            // 插入表情
            window.insertEmoji = function(emoji) {
                const messageInput = document.getElementById('messageInput');
                const cursorPos = messageInput.selectionStart;
                const textBefore = messageInput.value.substring(0, cursorPos);
                const textAfter = messageInput.value.substring(cursorPos);
                
                messageInput.value = textBefore + emoji + textAfter;
                messageInput.focus();
                
                // 设置光标位置到表情后面
                const newCursorPos = cursorPos + emoji.length;
                messageInput.setSelectionRange(newCursorPos, newCursorPos);
                
                // 隐藏表情面板
                document.getElementById('emojiPanel').style.display = 'none';
            };

            window.uploadImage = function() {
                layer.msg('图片上传功能开发中...', {icon: 1});
            };

            window.uploadFile = function() {
                layer.msg('文件上传功能开发中...', {icon: 1});
            };

            window.startVoice = function() {
                layer.msg('语音输入功能开发中...', {icon: 1});
            };

            // 回车发送消息
            document.getElementById('messageInput').addEventListener('keypress', function(e) {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    sendMessage();
                }
            });

            // 点击外部区域关闭表情面板
            document.addEventListener('click', function(e) {
                const emojiPanel = document.getElementById('emojiPanel');
                const emojiBtn = document.querySelector('.toolbar-btn');
                
                if (emojiPanel && emojiPanel.style.display === 'block') {
                    if (!emojiPanel.contains(e.target) && !emojiBtn.contains(e.target)) {
                        emojiPanel.style.display = 'none';
                    }
                }
            });

            // 移除自动调整输入框高度功能
            // document.getElementById('messageInput').addEventListener('input', function() {
            //     this.style.height = 'auto';
            //     this.style.height = Math.min(this.scrollHeight, 100) + 'px';
            // });
        });
    </script>
</body>
</html> 